<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<style type="text/css">
.ui-datepicker {
	font-size: 13px;
	width: 90%;
}
.ui-datepicker select.ui-datepicker-month {
	width: 70%;
	font-size: 11px;
}
.ui-datepicker select.ui-datepicker-year {
	width: 70%;
	font-size: 11px;
}
</style>
<script>
$(function() {
	$('#calendar').datepicker({
		minDate:new Date(), // 날짜 선택 최소값
	   	maxDate:"", // 날짜 선택 최대값
		dateFormat:'yy.mm.dd',
		dayNames: ['월요일', '화요일', '수요일', '목요일', '금요일', '토요일', '일요일'],
	    dayNamesMin: ['월', '화', '수', '목', '금', '토', '일'], 
	    monthNamesShort: ['1','2','3','4','5','6','7','8','9','10','11','12'],
	    monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
		showOtherMonths:true,
		selectOtherMonths:true,
	    onSelect:function(dateText,inst){
			$("#datepicker").text(dateText);
			$("#setSchedule").html("");
			$("#setTimeNo").val("");
			$("#studentCount").html(""); 
			$("#adultCount").html(""); 
			$("input[name=adultNum]").val("");
	    	$("input[name=stuNum]").val("");
			$("#totalMoney").html("");
			$("input[name=amount]").val("");
			$.ajax({
				type:"get",
				url:"${initParam.root}ticketing/getRunningTimeListByDateAjax.do",
				data:"date="+dateText+"&showingVO.cinemaVO.cinemaNo="+$("input[name=cinemaNo]").val()+"&showingVO.movieVO.movieNo="+$("input[name=movieNo]").val(),
				datatype:"json",
				success:function(data){
					var str = "";
					$.each(data, function(index, data){
						str += "<input type='button' id='"+data.timeNo+"' value='"+ data.time+":00'> ";
					});
					$("input[name=dateNo]").val(data[0].scheduleDateVO.dateNo);
					$("#scheduleTime").html(str);
				}
			});
	    }
	});
    //ticketingMovieList 클릭 시 구동
    $(document).on('click', '.ticketingMovieList span', function(){
    	$("#movieName").html($(this).text());
    	$("input[name=movieNo]").val($(this).attr('id'));
    	$("#cinemaName").html("");
    	$("input[name=cinemaNo]").val();
    	$('#calendar').datepicker("option", "minDate", "");
    	$('#calendar').datepicker("option", "maxDate", "");
    	$("#datepicker").text("");
    	$("input[name=dateNo]").val();
    	$("#setSchedule").html("");
    	$("#scheduleTime").html("");
    	$("#setTimeNo").val("");
    	$("#studentCount").html(""); 
    	$("#adultCount").html(""); 
    	$("input[name=adultNum]").val("");
    	$("input[name=stuNum]").val("");
    	$("#totalMoney").html("");
    	$("input[name=amount]").val("");
		$.ajax({
			type:"get",
			url:"${initParam.root}ticketing/getCinemaListByMovieNoAjax.do",
			data:"movieNo="+$(this).attr('id'),
			datatype:"json",
			success:function(data){
		   		var cinemaReloading = "<table class='ticketingCinemaList'><tbody>";
		   		var moviePoster = "<img src='${initParam.root}"+data.movieContent.posterPath+"' width='200' height='250'>";
		   		$.each(data.cinemaList,function(index, list){
		   			cinemaReloading +="<tr><td><span id="+list.cinemaNo+">"+list.name+"</span></td></tr>";
		   		});
		   		cinemaReloading += "</tbody></table>";    			
		   		$("#cinemaReloading").html(cinemaReloading);
		   		$("#moviePoster").html(moviePoster);
		   	}
		});
	});
    //ticketingCinemaList 클릭 시 구동
    $(document).on('click', '.ticketingCinemaList span', function(){
    	$("#cinemaName").html($(this).text());
    	$("input[name=cinemaNo]").val($(this).attr('id'));
    	$("#datepicker").text("");
    	$("input[name=dateNo]").val();
    	$("#setSchedule").html("");
    	$("#scheduleTime").html("");
    	$("#setTimeNo").val("");
    	$("#studentCount").html(""); 
    	$("#adultCount").html(""); 
    	$("input[name=adultNum]").val("");
    	$("input[name=stuNum]").val("");
    	$("#totalMoney").html("");
    	$("input[name=amount]").val("");
	    $.ajax({
	    	type:"get",
	    	url:"${initParam.root}ticketing/getMovieListByCinemaNoAjax.do",
	    	data:"cinemaVO.cinemaNo="+$(this).attr('id')+"&movieVO.movieNo="+$("input[name=movieNo]").val(),
	    	datatype:"json",
	    	success:function(data){
	    		var movieReloading = "<table class='ticketingMovieList'><tbody>";   			
	    		$.each(data.titleList,function(index, list){
	    			movieReloading +="<tr><td><span id="+list.movieNo+">"+list.title+"</span></td></tr>";
	    		});
	    		movieReloading += "</tbody></table>";
	    		$("#movieReloading").html(movieReloading);
	    		var startDate = data.showingVO.startDate;
	    		var Arr = startDate.split(".");
	    		var startM=Arr[1];
				var startD=Arr[2];
				// 상영 시작일이 현재 날짜보다 이전에 있을 때 minDate 를 현재 날짜로 setting 한다.
				if(!((startM==(new Date().getMonth())&&startD<=new Date().getDate())||startM<(new Date().getMonth()))){
					$('#calendar').datepicker("option", "minDate", new Date());
				}else{
					$('#calendar').datepicker("option", "minDate", data.showingVO.startDate);
				}
				$('#calendar').datepicker("option", "maxDate", data.showingVO.endDate);
					
	    	}
	    });
    });
  	//scheduleTime 클릭 시 구동
    $(document).on('click', '#scheduleTime :button', function(){
    	$("#setSchedule").html($(this).val());
    	$("#setTimeNo").val($(this).attr('id'));
    	$("#studentCount").html(""); 
    	$("#adultCount").html(""); 
    	$("input[name=adultNum]").val("");
    	$("input[name=stuNum]").val("");
    	$("#totalMoney").html("");
    	$("input[name=amount]").val("");
    });
    //금액 계산
    var adultTotal = 0;
    var stuTotal = 0;
    var total = 0;
    var adultNum = "0";
    var stuNum = "0";
    $(":button").click(function(){
    	var count;
    	if($(this).attr("name")=="adult"){
    		count = $(this).val();
    		adultTotal = 8000*count;
    		$("#adultCount").html(count+"명(성인)");
    		if($(this).val()==0){
       			$("#adultCount").html(""); 
       		}
    		adultNum=count;
    	}
    	if($(this).attr("name")=="student"){
    		count = $(this).val();
    		stuTotal = 6000*count;    		
    		$("#studentCount").html(count+"명(학생)");
	   		if($(this).val()==0){
	   			$("#studentCount").html(""); 
	   		}
	   		stuNum=count;
    	}
    	total=adultTotal+stuTotal;
    	$("#totalMoney").html(total);
    	$("input[name=amount]").val(total);
    	$("input[name=adultNum]").val(adultNum);
    	$("input[name=stuNum]").val(stuNum);
    });
    // 예매하기 버튼 클릭시 구동
    $("#reserve").submit(function(){
    	var movieNo = $("input[name=movieNo]").val();
    	var cinemaNo = $("input[name=cinemaNo]").val();
    	var dateNo = $("input[name=dateNo]").val();
    	var timeNo = $("#setTimeNo").val();
    	var adultNum = $("input[name=adultNum]").val();
    	var stuNum = $("input[name=stuNum]").val();
    	var amount = $("input[name=amount]").val();
    	if(movieNo=="" || cinemaNo=="" || dateNo=="" || timeNo=="" || (adultNum==""&&stuNum=="") || amount==0){
    		alert("모든 항목을 선택해야 예매가 가능합니다!");
    		return false;
    	}
	});
});
</script>
<h3>티켓 예매</h3>
<hr align="left" width="150">
<center>
<table class="ticketing">
	<thead>
	</thead>
	<tbody>
	<tr align="center">
		<td width="180" style="background:skyblue; color:#fff;">영화선택</td>
		<td width="180" style="background:skyblue; color:#fff;">극장선택</td>
		<td width="180" style="background:skyblue; color:#fff;">날짜선택</td>
		<td width="200" style="background:skyblue; color:#fff;">선택한 영화 정보</td>
	</tr>
	<tr valign="top">
		<td height="200">
		<div id="movieReloading">
			<table class="ticketingMovieList">
				<tbody>
					<c:forEach items="${requestScope.orderListMap.titleList }" var="data">
						<tr>
							<td>
								<span id="${data.movieNo }">${data.title }</span>
							</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
		</td>
		<td valign="top">
		<div id="cinemaReloading">
				<table class="ticketingCinemaList">
				<tbody>
					<c:forEach items="${requestScope.orderListMap.cinemaList }" var="data">
						<tr>
							<td>
								<span id="${data.cinemaNo }">${data.name }</span>
							</td>
						</tr>
					</c:forEach>
				</tbody>			
				</table>
			</div>			
		</td>		
		<td width="200px" height="300px" align="center">
			<div id="calendar"></div>
		</td>
		<td rowspan="3" align="left">
			<form id="reserve" method="post" action="${initParam.root }ticketing/seatList.do">
			<table>
				<tr>
					<td><span id="moviePoster"><img src="" width="200" height="250"></span></td>
				</tr>
				<tr>
					<td>영화:<span id="movieName"></span>
					<input type="hidden" name="movieNo" value=""></td>
				</tr>
				<tr>
					<td>극장:<span id="cinemaName"></span>
					<input type="hidden" name="cinemaNo" value=""></td>
				</tr>
				<tr>
					<td>날짜:<span id="datepicker"></span>
					<input type="hidden" name="dateNo" value="">
				</tr>
				<tr>
					<td>시간:<span id="setSchedule"></span>
					<input type="hidden" id="setTimeNo" name="scheduleTimeVO.timeNo" value=""></td>
				</tr>
				<tr>
					<td>인원:<span id="adultCount"></span>&nbsp;<span id="studentCount"></span>
					<input type="hidden" name="adultNum" value="">
					<input type="hidden" name="stuNum" value=""></td>
				</tr>
				<tr>
					<td>좌석:-</td>
				</tr>
				<tr>
					<td>금액:<span id="totalMoney"></span>
					<input type="hidden" name="amount" value=""></td>
				</tr>
				<tr>
					<td align="center"><input type="submit" value="예매하기"></td>
				</tr>
			</table>			
			</form>
		</td>
	</tr>
	<tr align="center">
		<td colspan="2" style="background:skyblue; color:#fff;">상영 시간표</td>
		<td width="280px" style="background:skyblue; color:#fff;">인원수 선택</td>
	</tr>
	<tr>
		<td colspan="2" height="200px">
			<div id="scheduleTime"></div>
		</td>
		<td align="center">
			<table class="peopleCount">
			<thead>
			<tr>
				<td align="left" width="120px">성인</td><td>1매/8000원</td>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td align="left" colspan="2">
				<input type="button" name="adult" value="0">
				<input type="button" name="adult" value="1">
				<input type="button" name="adult" value="2">
				<input type="button" name="adult" value="3">
				</td>
			</tr>
			</tbody>
			<thead>
			<tr>
				<td align="left">학생</td><td>1매/6000원</td>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td align="left" colspan="2">
				<input type="button" name="student" value="0">
				<input type="button" name="student" value="1">
				<input type="button" name="student" value="2">
				<input type="button" name="student" value="3">
				</td>
			</tr>
			</tbody>
			</table>
		</td>
	</tr>
</tbody>
</table>
</center>